<template>
    <div class="max">
        <div class="aa">
             <el-form :inline="true" :model="model" class="demo-form-inline">
                <el-form-item label="模板名称">
                    <el-input v-model="model.name" placeholder="模板名称"></el-input>
                </el-form-item>
                <el-form-item label="模板描述">
                    <el-input v-model="model.fDescribe" placeholder="模板描述"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="add()">新增</el-button>
                    <el-button type="success" @click="handleExport">模板数据导出Excel</el-button>
                </el-form-item>
        </el-form>
        </div>
       <el-dialog
            :visible.sync="addialog"
            width="30%"
             :before-close="cancel"
           >

            <span slot="footer" class="dialog-footer">
                <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="模板名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="模板描述" prop="fdescribe">
                    <el-input v-model="form.fDescribe"></el-input>
                </el-form-item>
                <el-form-item label="数据库类型" prop="type">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="addSave" v-if="addflag">保存新增</el-button>
                    <el-button type="primary" @click="updateSave" v-if="updateflag">保存更新</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
                </el-form>


            </span>
            </el-dialog>



        <el-table
        border
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
            <el-table-column
                prop="name"
                label="模板名称"
                width="200">

            </el-table-column>

            <el-table-column
                prop="fDescribe"
                label="模板描述"
                width="500">
            </el-table-column>

            <el-table-column
                prop="type"
                label="数据库类型"
                width="150">
            </el-table-column>
            <el-table-column
              prop="state"
              label="是否应用"
              width="150">
            </el-table-column>

            <el-table-column
                label="操作">
                <template slot-scope="scope">
                 <el-button type="success"  size="mini" @click="update(scope.row)">修改</el-button>
                  <el-button type="danger"  size="mini" @click="deleteh(scope.row)">删除</el-button>
                   <el-button type="primary"  size="mini" @click="application(scope.row)">对象应用</el-button>

                </template>


            </el-table-column>
        </el-table>
    </div>
</template>

<script>  window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
import {queryOperationformwork,deleteOperationformwork,addOperationformwork,queryOperationformworkById,updateOperationformwork} from "@/api/system/formwork"
export default {
    methods: {
        application(row){
          this.$confirm('是否应用对象', '对象应用', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            row.state = '是'
            updateOperationformwork(row).then(res=>{
              //this.form=res.data
              this.getList()
              this.$alert('对象应用成功', '提示', {
                confirmButtonText: '确定',
              });
            })


          });
        },
        cancel(){
            this.$refs['form'].resetFields()
             this.addialog=false

        },

        add(){
            this.addialog=true
            this.addflag=true
             this.updateflag=false
        },
        addSave(){
            addOperationformwork(this.form).then(res=>{
                this.$alert(res.msg, '提示', {
                });
                this.addialog=false
             this.$refs['form'].resetFields()
             this.getList()
            })


        },
        update(row){
            queryOperationformworkById(row).then(res=>{
                this.form=res.data
            })
            this.updateflag=true
            this.addflag=false
            this.addialog=true
        },
        updateSave(){
                updateOperationformwork(this.form).then(res=>{
                     this.$alert(res.msg, '提示', {
                });
                  this.addialog=false
                  this.form.id=''
                 this.$refs['form'].resetFields()
                 this.getList()
                })

        },
        deleteh(row){

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                deleteOperationformwork(row).then(res=>{
                this.$alert(res.msg, '提示', {
                });
                  this.getList()
            })



            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
            });




        },
        onSubmit(){
            queryOperationformwork(this.model).then(res=>{
                this.tableData=res.data
            })
        },

        copy(){
             this.$alert('复制成功', '镜像复制', {
                confirmButtonText: '确定',
                });
            this.getList()
        },

        beginEdit(){
            this.$alert('初始化配置成功', '初始化配置', {
                confirmButtonText: '确定',
                });
            this.getList()
        },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
        getList(){
          let data = {}
            queryOperationformwork(data).then(res=>{
                this.tableData=res.data
                // console.log(res.data)
            })


        },
         handleExport() {
          this.download('OperationFormWorkController/export', {
            ...this.queryParams
          }, `运维经验模板-${new Date().getTime()}.xlsx`)
        }


    },
    data() {
      return {
        addflag:false,
        updateflag:false,
        form: {
          id:'',
          name: '',
          type: '',
          fDescribe:'',
          state:''

        },
        tableData: [],
        model: {
          name: '',
          type: '',
          fDescribe:'',
          state:''
        },
        addialog:false
      }
    },
    created(){
        this.getList()
    }






}
</script>

<style scoped>

.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .aa{
    margin-top: 30px;
    margin-left: 50px;
  }
  .max{
    overflow: auto;
  }
</style>
